<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
  <style>
    #form {
      width: 400px;
      margin: 0 auto;
      margin-top: 100px;
    }

    h1 {
      text-align: center;
    }

    input[type='submit'] {
      width: 100%;
    }
    .msg{
      position: absolute;
      left:50%;
      margin-left:-130px;
      top: 20px;
      width: 260px;
      height: 30px;
      background-color: rgb(146, 29, 8);
      color: #fff;
      text-align: center;
      line-height: 30px;
      border-radius: 8px;
      display: none;
    }
    .success{
      background-color: rgb(41, 148, 9);
    }
  </style>
</head>

<body>
  <div class="msg"></div>
  <form id="form">
    <h1>注册页面</h1>
    <div class="form-group">
      <input type="text" name="username" id="username" class="form-control input-lg" placeholder="用户名">
    </div>

    <div class="form-group">
      <input type="password" name="password" id="password" class="form-control input-lg" placeholder="请输入6~18位密码">
    </div>

    <div class="form-group">
      <input type="text" name="nickname" id="nickname" class="form-control input-lg" placeholder="昵称">
    </div>

    <div class="form-group">
      <input type="submit" value="注册新用户" class="btn btn-primary btn-lg">
    </div>
  </form>

  <script src="/node_modules/jquery/dist/jquery.min.js"></script>
  <script>
    $(function () {   
      //点击注册按钮发送ajax请求
      $('#form').on('submit', function (e) {
        //阻止一下自带的提交功能
        e.preventDefault();
        //获取表单的内容以做验证 
        let username = $('#username').val();
        let password = $('#password').val();
        let nickname = $('#nickname').val();
        //写正则表达式
        let regName = /[\u4e00-\u9fa5]{2,5}|(^[a-zA-Z]+[\s.]?([a-zA-Z]+[\s.]?){0,4}[a-zA-Z]$)/; //中文或者英文姓名 且中文名字不能超过5个字
        let regPassword = /^\w{6,18}$/; //6~18位密码可以是数字字母或者下划线 
        //发送ajax请求
        $.ajax({
          type: "post", 
          url: "/register", 
          data: $('#form').serialize(), 
          dataType: "json",
          beforeSend: function () {
            //发送ajax之前做一个简单的验证
            if(!regName.test(username)){
              $('.msg').removeClass('success').html('用户名格式不正确').fadeIn(1000).delay(2000).fadeOut(1000);
              return false;
            }
            if(!regName.test(nickname)){
              $('.msg').removeClass('success').html('昵称格式不正确').fadeIn(1000).delay(2000).fadeOut(1000);
              return false;
            }
            if(!regPassword.test(password)){
              $('.msg').removeClass('success').html('密码格式不正确').fadeIn(1000).delay(2000).fadeOut(1000);
              return false;
            }
          //如果以上都没问题就发送给后台 后台验证是否已经存在该名字 如果存在 就返回一个结果 前台展示结果给用户。
          }, 
          success: function (res) { 
            console.log(res);
            if(res.status == 501){
              $('.msg').removeClass('success').html(res.message).fadeIn(1000).delay(2000).fadeOut(1000);
            }
            if(res.status == 200){
              $('#form')[0].reset();
              $('.msg').addClass('success').html(res.message).fadeIn(1000).delay(2000).fadeOut(1000);
              setTimeout(function(){
                location.assign('/login');
            },2000)
            }
          },
        });

      })









    })
  </script>
</body>

</html>